<template>
	<div>
        <mj-title type="h2" title="Alert 弹框"></mj-title>
        <div class="page-desc">基于Dialog的信息提示组件</div>

        <mj-title type="h5" title="Alert"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-button @click="alertOpen(1)" type="success">成功</mj-button>
				<mj-button @click="alertOpen(2)" type="error">失败</mj-button>
				<mj-button @click="alertOpen(3)" type="warning">警告</mj-button>
				<mj-button @click="alertOpen(4)" type="normal">提示</mj-button>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-button @click="alertOpen(1)" type="success">成功&lt;/mj-button>
	&lt;mj-button @click="alertOpen(2)" type="error">失败&lt;/mj-button>
	&lt;mj-button @click="alertOpen(3)" type="warning">警告&lt;/mj-button>
	&lt;mj-button @click="alertOpen(4)" type="normal">提示&lt;/mj-button>
&lt;/template>
&lt;script>
export default {
  data () {
    return {}
  },
  methods: {
    alertOpen (type) {
      this.$alert('这是内容', {
        title: '警告',
        confirm: '确定',
        icon:type
      })
      // 等价于下面代码
      /* this.$dialog({
      title:'警告',
      content:'这是内容',
      confirm:'确定',
      icon:3, // 默认为警告类
      className: 'dialog-alert', // 添加一个样式
      showClose: false, // 不显示右上角关闭按钮
      closeModal: false // 点击遮罩层不关闭
      }) */
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="Confirm"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-button @click="alertOpen2" type="primary">模拟Confirm</mj-button>
            	<ul class="page-list">
            		<li>Confirm类使用，在页面直接使用 this.$alert()。同alert，这里使用了回调</li>
            	</ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-button @click="alertOpen2" type="primary">模拟Confirm&lt;/mj-button>
&lt;/template>
&lt;script>
export default {
  data () {
    return {}
  },
  methods: {
    alertOpen2 () {
      this.$alert('确定删除', {
        title: '警告',
        confirm: '确定',
        cancel: '取消',
        callback (done) {
          alert('回调事件')
          done()
        }
      })
      // 等价于
      /* this.$dialog({
        title: '警告',
        content: '确定删除',
        confirm: '确定',
        cancel: '取消',
        callback (done) {
          alert('回调事件')
          done()
        },
        icon: 3, // 默认为警告类
        className: 'dialog-alert', // 添加一个样式
        showClose: false, // 不显示右上角关闭按钮
        closeModal: false // 点击遮罩层不关闭
      }) */
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="Message"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-button @click="alertOpen3(1)" type="success">成功</mj-button>
				<mj-button @click="alertOpen3(2)" type="error">失败</mj-button>
				<mj-button @click="alertOpen3(3)" type="warning">警告</mj-button>
				<mj-button @click="alertOpen3(4)" type="normal">提示</mj-button>
				<ul class="page-list">
					<li>Message类使用，在页面直接使用 this.$msg()</li>
				</ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-button @click="alertOpen3(1)" type="success">成功&lt;/mj-button>
	&lt;mj-button @click="alertOpen3(2)" type="error">失败&lt;/mj-button>
	&lt;mj-button @click="alertOpen3(3)" type="warning">警告&lt;/mj-button>
	&lt;mj-button @click="alertOpen3(4)" type="normal">提示&lt;/mj-button>
&lt;/template>
&lt;script>
export default {
  data () {
    return {}
  },
  methods: {
    alertOpen3 (type) {
      this.$msg('删除成功', {
        icon: type
      })
      // 等价于
      /* this.$dialog({
        content: '删除成功',
        icon: 1,
        autoClose: 3, // 自动关闭
        className: 'dialog-msg', // 添加一个样式
        showClose: false, // 不显示右上角关闭按钮
        closeModal: false, // 点击遮罩层不关闭
        modal: false // 不显示遮罩层
      }) */
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Dialog Alert 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>参数</th>
					<th>类型</th>
					<th>说明</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>标题，默认为提示</td>
					<td>string</td>
					<td>-</td>
				</tr>
				<tr>
					<td>confirm</td>
					<td>确认按钮，点击默认关闭窗口，默认为确认</td>
					<td>string</td>
					<td>-</td>
				</tr>
				<tr>
					<td>cancel</td>
					<td>取消按钮，点击默认关闭窗口</td>
					<td>string</td>
					<td>-</td>
				</tr>
				<tr>
					<td>callback</td>
					<td>回调事件</td>
					<td>function</td>
					<td></td>
				</tr>
				<tr>
					<td>icon</td>
					<td>用于展示常见的alert提示，1成功，2失败，3警告，4提示。其它的可通过添加样式控制</td>
					<td>number</td>
					<td>0</td>
				</tr>
				<tr>
					<td>width</td>
					<td>Dialog 的宽度，单位px</td>
					<td>number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>animation</td>
					<td>动画样式名，可选zoom、flip、door、rotate、slideDown、slideUp、slideLeft、slideRight</td>
					<td>string</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

        <mj-title type="h6" title="Message 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>参数</th>
					<th>类型</th>
					<th>说明</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>icon</td>
					<td>用于展示常见的alert提示，1成功，2失败，3提示，4警告。其它的可通过添加样式控制</td>
					<td>Number</td>
					<td>0</td>
				</tr>
				<tr>
					<td>width</td>
					<td>Dialog 的宽度，单位px</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>animation</td>
					<td>动画样式名，可选zoom、flip、door、rotate、slideDown、slideUp、slideLeft、slideRight</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

	</div>
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        methods: {
		    alertOpen (type) {
		      this.$alert('这是内容', {
		        title: '信息',
		        confirm: '确定',
		        icon: type
		      })
		      // 等价于下面代码
		      /* this.$dialog({
		      title:'警告',
		      content:'这是内容',
		      confirm:'确定',
		      icon:3, // 默认为警告类
		      className: 'dialog-alert', // 添加一个样式
		      showClose: false, // 不显示右上角关闭按钮
		      closeModal: false // 点击遮罩层不关闭
		      }) */
		    },
		    alertOpen2 () {
		      this.$alert('确定删除', {
		        title: '警告',
		        confirm: '确定',
		        cancel: '取消',
				beforeClose: (type, instance, done) =>{
					console.log(type)
					if (type === 'confirm') {
						instance.confirmButtonLoading = true;
						instance.confirm = '执行中...';
						setTimeout(() => {
							done();
							setTimeout(() => {
								instance.confirmButtonLoading = false;
							}, 300);
						}, 3000);
					}else {
						done();
					}
				},
		        callback (done) {
		          alert('回调事件')
		          done()
		        }
		      })
		      // 等价于
		      /* this.$dialog({
		        title: '警告',
		        content: '确定删除',
		        confirm: '确定',
		        cancel: '取消',
		        callback (done) {
		          alert('回调事件')
		          done()
		        },
		        icon: 3, // 默认为警告类
		        className: 'dialog-alert', // 添加一个样式
		        showClose: false, // 不显示右上角关闭按钮
		        closeModal: false // 点击遮罩层不关闭
		      }) */
		    },
		    alertOpen3 (type) {
		      this.$msg('删除成功/失败/警告提示', {
		        icon: type,
		        animation:'slideDown'
		      })
		      // 等价于
		      /* this.$dialog({
		        content: '删除成功',
		        icon: 1,
		        autoClose: 3, // 自动关闭
		        className: 'dialog-msg', // 添加一个样式
		        showClose: false, // 不显示右上角关闭按钮
		        closeModal: false, // 点击遮罩层不关闭
		        modal: false // 不显示遮罩层
		      }) */
		    },
		    alertOpen4(){
		    this.$dialogClear()
		    }
        },
    }
</script>

<style scoped>
.page-list {margin-top: 15px;}
</style>